﻿@{
    ViewBag.Title = "ProgressReport";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="@Url.Content("~/Content/amcharts/amcharts.js")" type="text/javascript"></script>

<h2>ProgressReport</h2>

<script type="text/javascript">

    // declaring variables
    var chart;
    var dataProvider;
    var sprints;

    // this method called after all page contents are loaded
    window.onload = function () {
        createChart();
        loadCSV("/MyProjects/progressdata");
    }

    // method which loads external data
    function loadCSV(file) {
        if (window.XMLHttpRequest) {
            // IE7+, Firefox, Chrome, Opera, Safari
            var request = new XMLHttpRequest();
        }
        else {
            // code for IE6, IE5
            var request = new ActiveXObject('Microsoft.XMLHTTP');
        }
        // load
        request.open('GET', file, false);
        request.send();
        if (request.status == 404) {
            window.alert("There is no progress data!");
            return;
        }
        parseCSV(request.responseText);
    }

    // method which parses csv data
    function parseCSV(data) {
        //replace UNIX new lines
        data = data.replace(/\r\n/g, "\n");
        //replace MAC new lines
        data = data.replace(/\r/g, "\n");
        //split into rows
        var rows = data.split("\n");
        // create array which will hold our data:
        dataProvider = [];
        sprints = [];

        // loop through all rows
        for (var i = 0; i < rows.length; i++) {
            // this line helps to skip empty rows
            if (rows[i]) {
                // our columns are separated by comma
                var column = rows[i].split(",");

                // column is array now 
                // first item is date
                var date = column[0];
                // second item is value of the second column
                var value1 = column[1];
                // third item is value of the fird column 
                var value2 = column[2];
                var dataObject = { date: date, value1: value1, value2: value2 };
                dataProvider.push(dataObject);
                sprints[i] = column[3];
            }
        }
        var categoryAxis = chart.categoryAxis;
        sprints[0] = "new sprint";
        var i = 1;
        for (j = 0; j < sprints.length; j++) {
            if (sprints[j] == "new sprint") {
                var guide1 = new AmCharts.Guide();
                guide1.category = j;
                guide1.lineColor = "#CC0000";
                guide1.lineAlpha = 1;
                guide1.dashLength = 2;
                guide1.inside = true;
                guide1.labelRotation = 90;
                guide1.label = "Sprint " + i.toString() + " starts";
                i++;
                categoryAxis.addGuide(guide1);
            }
        }
        chart.dataProvider = dataProvider;
        chart.validateData();
    }

    // method which creates chart
    function createChart() {
        chart = new AmCharts.AmSerialChart();
        chart.addTitle("Burn down diagram");
        chart.categoryField = "date";

        // AXES
        var day = chart.categoryAxis;
        day.gridAlpha = 0.07
        day.showLastLabel = false;
        //day.startOnAxis = true;

        var valueAxis = new AmCharts.ValueAxis();
        valueAxis.minimum = 0;
        chart.addValueAxis(valueAxis);


        var graph1 = new AmCharts.AmGraph();
        graph1.valueField = "value2";
        graph1.bullet = "square";
        graph1.title = "Work remaining";
        chart.addGraph(graph1);

        // chart must have a graph
        var graph = new AmCharts.AmGraph();
        graph.valueField = "value1";
        // and add graph to the chart
        chart.addGraph(graph);
        graph.bullet = "square";
        graph.title = "Workload";
        /*
        var guide2 = new AmCharts.Guide();
        guide2.category = "2007";
        guide2.lineColor = "#CC0000";
        guide2.lineAlpha = 1;
        guide2.dashLength = 2;
        guide2.inside = true;
        guide2.labelRotation = 90;
        guide2.label = "motorcycle maintenance fee introduced";
        categoryAxis.addGuide(guide2);*/

        var legend = new AmCharts.AmLegend();
        legend.valueText = "Realised work";
        chart.addLegend(legend);             
        chart.write('chartdiv');
    }
</script>
  <div id="chartdiv" style="width: 900px; height: 600px;"></div>